<!-- 未选题 -->
<div *ngIf="Student.SelectStatus==0 || Student.SelectStatus==null" class="row">
  <div class="col-sm-12">
    <div class="box box-primary">
      <div class="table-scroll-content">
        <table class="table table-bordered table-hover table-striped table-keep-line">
            <thead>
              <tr>
                  <th>题目编号</th>
                  <th>题目名称</th>
                  <th>选题人学号</th>
                  <th>选题人姓名</th>
                  <th>状态</th>
                  <th>选择或取消</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let title of Titles">
                  <td>{{title.TitleId}}</td>
                  <td><a (click)="showDetail(title)" style="text-decoration:underline">{{title.TitleName}}</a></td>
                  <td>{{title.StudentId}}</td>
                  <td>{{title.StudentName}}</td>
                  <td *ngIf="title.TitleStatus==0 || title.TitleStatus==null" style="color:gray">未被选</td>
                  <td *ngIf="title.TitleStatus==1" style="color:#FF7B00">待确认</td>
                  <td *ngIf="title.TitleStatus==2" style="color:green">已被选</td>
                  <td *ngIf="title.TitleStatus==0 || title.TitleStatus==null"><button class="btn btn-primary btn-xs" (click)="selTitle(title)">选择</button></td>
                  <td *ngIf="title.TitleStatus==1" style="color:#FF7B00">待确认</td>
                  <td *ngIf="title.TitleStatus==2" style="color:green">已被选</td>
              </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- 待确认 -->
<div *ngIf="Student.SelectStatus==1" class="row">
    <div class="col-sm-12">
        <div class="alert alert-info">你已选择题目,正在等待确认通过... 如要更换或取消题目,请点击右下角取消按钮.</div>
        <div class="box box-primary box-body">
            <span><strong>题目:</strong></span>
            <p>{{Title.TitleName}}</p>
            <span><strong>题目详情:</strong></span>
            <p>{{Title.TitleDetail}}</p>
            <span><strong>题目要求:</strong></span>
            <p>{{Title.TitleRequire}}</p>
            <div><button class="btn btn-danger pull-right" (click)="cancel()">取消</button></div> 
        </div>
    </div>
</div>

<!-- 已选题 -->
<div *ngIf="Student.SelectStatus==2" class="row">
    <div class="col-sm-12">
        <div class="alert alert-info">你已选择题目,正在等待确认通过... 如要更换或取消题目,请点击右下角取消按钮.</div>
        <div class="box box-primary box-body">
            <span><strong>题目:</strong></span>
            <p>{{Title.TitleName}}</p>
            <span><strong>题目详情:</strong></span>
            <p>{{Title.TitleDetail}}</p>
            <span><strong>题目要求:</strong></span>
            <p>{{Title.TitleRequire}}</p>
        </div>
    </div>
</div>

<!-- 详情模版 -->
<div class="modal fade" id="showTitle" tabindex="-1" role="dialog" aria-labelledby="详情">
    <div class="modal-dialog" role="document">
        <div class="modal-content col-sm-12">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">题目详情</h4>
            </div>
            <div class="modal-body">
                <span><strong>题目:</strong></span>
                <p>{{titleInfo.TitleName}}</p>
                <span><strong>题目详情:</strong></span>
                <p>{{titleInfo.TitleDetail}}</p>
                <span><strong>题目要求:</strong></span>
                <p>{{titleInfo.TitleRequire}}</p>
            </div>
        </div>
    </div>
</div>